<template>
  <div class="login" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <hry-header title="" :showBackBtn="true" :needBackground="false">
      <div slot="content" class="normal-wrapper">
        <img src="@/assets/img/logo_01.png" alt="" />
        <div class="form-wrapper">
          <div class="login-title">
            <span class="active">绑定手机号</span>
          </div>
          <form novalidate @submit.prevent="validateBeforeSubmit">
            <div>
              <md-field>
                <input-validate
                  v-model="formData.phone"
                  placeholder="请输入您的手机号"
                  v-validate="'required|phone'"
                  name="phone"
                  type="phone"
                  icon="iconshouji1"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="您的手机号"
                  :error="errors.first('phone')"
                >
                </input-validate>
                <input-validate
                  v-model="formData.imgcode"
                  placeholder="输入您的图形验证码"
                  type="digit"
                  name="imgcode"
                  rightType="1"
                  v-validate="'required|max:6'"
                  icon="iconyanzhengma1"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="图形验证码"
                  :error="errors.first('imgcode')"
                >
                </input-validate>
                <input-validate
                  v-model="formData.code"
                  placeholder="输入您的短信验证码"
                  type="digit"
                  name="code"
                  rightType="2"
                  icon="iconyanzhengma1"
                  v-validate="'required|max:6'"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="短信验证码"
                  :error="errors.first('code')"
                >
                </input-validate>
              </md-field>
            </div>
            <div class="login-btn">
              <a-button type="primary" block html-type="submit">绑 定</a-button>
            </div>
          </form>
        </div>
        <div class="agree">
          <a-checkbox v-model="ischecked">
            <span class="agree_link"
              >我已同意<a
                href="javaScript:(0)"
                @click="agreement('user', '用户注册服务协议')"
                >《用户注册服务协议》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('service', '投资人服务协议')"
                >《投资人服务协议》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('tzfx', '投资风险提示书')"
              >
                《投资风险提示书》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('dzxy', '电子签名授权协议')"
              >
                《电子签名授权协议》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('wtkj', '委托快捷签署协议')"
              >
                《委托快捷签署协议》
              </a></span
            ></a-checkbox
          >
        </div>
      </div>
    </hry-header>
    <a-modal
      width="80%"
      height="80%"
      :title="title"
      :visible="visible"
      onOk="handleOk"
      @cancel="handleOk"
    >
      <agreement :type="type"></agreement>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import bg from "@/assets/img/login_bg.png";
import { Field } from "mand-mobile";
import "@/assets/fonticon/iconfont.css";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("phone", "请输入正确的手机号");
export default {
  name: "",
  components: {
    inputValidate,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Field.name]: Field,
    agreement: () => import("@/components/commonAgreement/index")
  },
  data() {
    return {
      bg: bg,
      visible: false,
      type: "",
      title: "",
      ischecked: true,
      formData: {
        phone: "",
        imgcode: "",
        code: ""
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$commonJs.goPage("resetPsw");
          return;
        }
      });
    },
    handleOk() {
      this.visible = false;
    },
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.visible = true;
    }
  },
  directives: {},
  filters: {},
  computed: {}
};
</script>

<style scoped lang="less">
.login {
  /*height: 100%;*/
  width: 100%;
  background-size: 100%, 100% !important;
  .normal-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 20px 0 20px;
    text-align: center;
    > img {
      margin-top: 75px;
      margin-bottom: 60px;
    }
    .form-wrapper {
      position: relative;
      text-align: left;
      margin: 27px 27px 62px 27px;
      padding: 39px 40px 117px 40px;
      background: @white;
      border-radius: 5px;
      box-shadow: 2px 2px 10px rgba(254, 226, 212, 1);
      .iconfont {
        .linear_gradient_back(#fad683, #f8962d, #ef8028);
        font-size: 36px;
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .login-title {
        font-size: 30px;
        margin-bottom: 34px;
        .active {
          color: #3e4a59;
          font-size: 48px;
        }
        .normal {
          color: #cdcdcd;
        }
      }
      .link {
        font-size: 25px;
      }
      .login-btn {
        position: absolute;
        bottom: -39px;
        width: calc(100% - 80px);
        .ant-btn {
          height: 75px;
          font-size: 30px;
        }
      }
    }
    .agree {
      width: calc(100% - 160px);
      text-align: center;
      margin: 0 auto;
      font-size: 18px;
      a {
        font-size: 18px;
      }
    }
  }
}
</style>
